<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-select placeholder="请选择类型" v-model="query.status">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in options"></el-option>
            </el-select>
            <el-input placeholder="模糊查询" style="width: 200px" type="text" v-model="query.keyword"></el-input>
            <el-button @click="page=1;init()" size="small" style="margin-left: 10px;" type="primary">搜索</el-button>
            <el-button @click="preview_visible=true" size="small" type="success">直播预览</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="live_id" width="80px"></el-table-column>
                <el-table-column label="用户ID" prop="user_id" width="150px">
                    <template slot-scope="scope">
                        <!-- <UserInfo :user_id="scope.row.user_id" v-if="scope.row.user_id"></UserInfo> -->
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.author" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="直播简介" prop="desc"></el-table-column> -->
                <el-table-column label="直播收费价格" prop="price"></el-table-column>
                <!-- <el-table-column label="位置信息" prop="city"></el-table-column> -->
                <el-table-column label="房间号" prop="room_id"></el-table-column>
                <!-- <el-table-column label="房间提示" prop="notice"></el-table-column> -->
                <el-table-column label="直播收益" prop="income"></el-table-column>
                <el-table-column label="在线人数" prop="online_user" width="80px"></el-table-column>
                <!-- <el-table-column label="累计观看人数" prop="online_amount"></el-table-column> -->
                <el-table-column label="点赞数" prop="like_amount"></el-table-column>
                <!-- <el-table-column label="是否连麦" prop="connected" width="70px"></el-table-column> -->
                <el-table-column label="人气" prop="popular" width="80px"></el-table-column>
                <el-table-column label=" 状态" prop="status">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == 1">已开播</el-tag>
                        <el-tag v-else-if="scope.row.status == 2">已下播</el-tag>
                        <el-tag type="danger" v-else>违规封停</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="违规原因" prop="close_reason">
                    <template slot-scope="scope" v-if="scope.row.status == 3">{{ scope.row.close_reason }}</template>
                </el-table-column>

                <el-table-column label="直播开始时间" prop="created_at" sortable></el-table-column>
                <el-table-column label="直播结束时间" prop="finished_at" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm @confirm="reasonShowFun(scope.row.room_id)" title="这是确定要封禁这个直播吗？" v-if="scope.row.status == 1">
                            <el-button size="mini" slot="reference" style="padding: 10px" type="danger" v-permission="['ADMIN', 'LIVE_BAN']">封禁</el-button>
                        </el-popconfirm>
                        <el-button @click="toDetails(scope.row)" size="mini" style="padding: 10px" type="success" v-if="scope.row.status == 1" v-permission="['ADMIN', 'LIVE_DETAILS']">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange" layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>

        <!-- 拒绝 -->
        <el-dialog :visible.sync="reasonShow" title="封禁原因" width="800px">
            <el-form :model="reasonForm">
                <el-form-item label="封禁原因">
                    <el-input placeholder="请输入封禁原因" style="width: 500px" type="textarea" v-model="reasonForm.close_reason"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBoxdisableFun">取 消</el-button>
                <el-button :loading="submitComplete" @click="disableFun" type="primary">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :show-close="false" :visible.sync="preview_visible" width="1450px">
            <preview></preview>
        </el-dialog>
    </div>
</template>
      
<script>
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
import preview from './preview'
export default {
    name:"live-broadcast-list",
    mixins: [initData],
    components: {
        medium,
        preview,
    },
    data() {
        return {
            query: {
                status: 1,
            },
            loading: false,
            options: [
                {
                    name: '已开播',
                    value: 1,
                },
                {
                    name: '已下播',
                    value: 2,
                },
                {
                    name: '违规封停',
                    value: 3,
                },
            ],
            submitComplete: false,
            reasonShow: false,
            preview_visible: false,
            reasonForm: {
                close_reason: '', //理由
                room_id: '',
            },
            disableID: '',
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/live/index'
            this.init() //重新请求数据
        },

        reasonShowFun(id) {
            this.reasonForm.room_id = id
            this.reasonShow = true
        },

        initReasonForm() {
            this.reasonForm = {
                close_reason: '', //理由
                room_id: '',
            }
        },

        //禁用
        disableFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            this.$request
                .put('/live/stop_live', that.reasonForm)
                .then((res) => {
                    this.$message.success('操作成功')
                    this.submitComplete = false
                    that.reasonShow = false
                    that.initReasonForm()
                    this.init() //重新请求数据
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },

        closeBoxdisableFun() {
            this.reasonShow = false
            that.initReasonForm()
        },

        del(id) {
            this.$request.del('/admin/delete/' + id).then((res) => {
                this.$message.success('操作成功')
                this.init()
            })
        },

        toDetails(item) {
            this.$router.push({ path: '/live-broadcast-details?id=' + item.user_id + '&room_id=' + item.room_id + '&status=' + item.status })
        },

        setMedium(value) {
            this.form.icon = value
            console.log('value', value)
        },

        selectFun(val) {
            const resultArr = Object.entries(this.typeList).filter((i) => i.includes(val))
            this.form.bank_code = resultArr[0][0]
        },
        disbaleLive(room_id) {
            let that = this
            this.$request.put('/live/stop_live', { room_id: room_id }).then((res) => {
                this.$message.success('直播已关闭')
            })
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>